<template>
  <div>
    <!-- 列表 -->
    <basic-layout title="活动报备" @handleAdd="handleAdd">
      <div class="columnFlex">
        <!-- 查询条件 -->
        <van-row class="search-row">
          <van-search
            v-model="formData.keyword"
            maxlength="20"
            show-action
            label=""
            placeholder="活动名称/活动地址"
            @search="onRefresh"
          >
            <template #action>
              <div @click="onRefresh">搜索</div>
            </template>
          </van-search>
          <div class="filter-icon">
            <van-icon
              name="filter-o"
              @click="$refs.queryPopupRef.show = true"
            />
          </div>
        </van-row>
        <van-row class="listCon">
          <van-pull-refresh
            class="pullRefresh"
            v-model="refreshLoading"
            @refresh="onRefresh"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="listData.length ? '没有更多了' : ''"
              @load="onLoad"
            >
              <van-swipe-cell v-for="val in listData" :key="val.activeId">
                <div class="cellContent" @click="handleDetail(val)">
                  <div class="top">
                    <div class="flexTit">
                      <div class="title">
                        {{ val.activeName }}
                        <!-- <div class="other">
                          {{ val.deptName }}
                        </div> -->
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="flex">
                      <p>
                        <span class="label">组织名称：</span>
                        {{ val.corpName }}/{{ val.deptName }}
                      </p>
                    </div>
                    <p>
                      <span class="label">活动时间：</span>
                      {{ val.activeTime }}
                    </p>
                    <p>
                      <span class="label">活动地点：</span>
                      {{ val.activeAddr }}
                    </p>
                    <p>
                      <span class="label">活动人数：</span>
                      {{ val.activePeropleNumer }}
                    </p>
                  </div>
                </div>
                <template #right>
                  <van-button
                    square
                    text="删除"
                    type="danger"
                    class="action-button"
                    @click="handleDelete(val)"
                  />
                </template>
              </van-swipe-cell>
            </van-list>
            <van-empty
              v-if="!loading && !listData.length"
              class="custom-image"
              :image="require('../../../../assets/images/empty.png')"
              description="暂无数据"
            />
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>
    <!-- 筛选条件弹出框 -->
    <queryPopup
      ref="queryPopupRef"
      @handleSearch="onRefresh"
      @handleReset="handleReset"
    >
      <van-form class="filterBox">
        <label>活动时间</label>
        <van-field
          readonly
          clickable
          :value="activityDateInterval"
          @click="activityDateShow = true"
          placeholder="点击选择活动时间"
        />
      </van-form>
    </queryPopup>
    <van-calendar
      v-model="activityDateShow"
      :min-date="minDate"
      :max-date="maxDate"
      :show-confirm="false"
      type="range"
      :allow-same-day="true"
      @confirm="onActivityDateConfirm"
    />
    <!-- 新增/详情/编辑 弹出框 -->
    <fullscreenModal
      :modal="fullscreenModal"
      :isAdd="isAdd"
      label="活动报备"
      :showSubmit="false"
      :showSave="false"
      :editType="editType"
      @handleClose="fullscreenModal = false"
      @handleCancel="editType = 'detail'"
      @handleEdit="handleUpdate"
      @handleSave="$refs.editFormRef.handleSave()"
    >
      <detail v-show="editType == 'detail'" ref="detailRef"></detail>
      <edit-form
        v-show="editType == 'edit'"
        @close="fullscreenModal = false"
        @refresh="onRefresh"
        ref="editFormRef"
      />
    </fullscreenModal>
    <full-loading v-if="loading"></full-loading>
  </div>
</template>

<script>
import {
  getPageForActivity,
  queryActivityDetail,
  deleteActivity,
} from "@/api/srvAssurance/epidprevention/activity/activity";
import editForm from "./editForm.vue";
import detail from "./detail.vue";
import { queryFileList } from "@/api/common";
export default {
  components: { editForm, detail },
  data() {
    return {
      formData: {
        isSelfFlag: "",
        activeTimeBegin: "",
        activeTimeEnd: "",
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      },
      showIsSelfPicker: false, //是否代填报picker
      loading: false,
      finished: false,
      refreshLoading: false,
      fullscreenModal: false,
      activityDateShow: false, //活动时间show
      activityDateInterval: "", //活动时间区间
      minDate: new Date(new Date().getFullYear() - 1, 0, 1),
      maxDate: new Date(new Date().getFullYear(), 11, 31),
      totalPage: 0, //总页数
      isAdd: false,
      editType: "",
      listData: [], // 列表数据
      currentParam: {}, // 保存当前查看详情的row数据
    };
  },
  mounted() {
    this.getSearch();
  },
  methods: {
    // 获取表格数据
    getSearch() {
      this.loading = true;
      getPageForActivity(this.formData)
        .then((res) => {
          this.loading = false;
          // this.refreshLoading = false;
          if (res.code === 1000 && res.data) {
            this.listData = [...this.listData, ...res.data.records];
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },
    onRefresh() {
      this.refreshLoading = false;
      this.finished = false;
      this.listData = [];
      this.formData.pageNum = 1;
      this.getSearch();
    },
    onLoad() {
      this.formData.pageNum++;
      this.getSearch();
    },
    // 重置
    handleReset() {
      this.formData = {
        isSelfFlag: "",
        activeTimeBegin: "",
        activeTimeEnd: "",
        keyword: "",
        pageNum: 1,
        pageSize: 20,
      };
      this.activityDateInterval = "";
      this.onRefresh();
    },
    // 新建数据
    handleAdd() {
      this.fullscreenModal = true;
      this.editType = "edit";
      this.isAdd = true;
      this.$refs.editFormRef.resetForm();
      //   this.$refs.editFormRef.setPrjData(this.projectId, this.projectInfo);
      this.currentParam = {};
    },
    // 查看详情
    async handleDetail(param) {
      this.fullscreenModal = true;
      this.editType = "detail";
      this.isAdd = false;
      var detailInfo = [];
      let item = param;
      this.currentParam = param;
      this.$refs.detailRef.getData(detailInfo);
      this.loading = true;
      let res = await queryActivityDetail(`?activeId=${param.activeId}`);
      if (res.status == "1000" && res.data) {
        item = res.data;
        this.currentParam = res.data;
      }
      this.loading = false;
      this.$refs.detailRef.getData(item);
      detailInfo = [
        {
          title: "活动名称",
          prop: "activeName",
          value: item.activeName,
        },
        {
          title: "活动时间",
          prop: "activeTime",
          value: item.activeTime,
        },
        {
          title: "活动地点",
          prop: "activeAddr",
          value: item.activeAddr,
        },
        {
          title: "活动人数",
          prop: "activePeropleNumer",
          value: item.activePeropleNumer,
        },
      ];
      let arr = [];
      if (param.activeFileIds) {
        queryFileList(param.activeFileIds.split(",")).then((res) => {
          if (res.code === 1000 && res.data) {
            arr.unshift({
              // title: "活动措施",
              value: [...res.data],
            });
          }
        });
      } else {
        // arrarr.push [{ title: "活动措施", value: [] }];
        arr.push({
          // title: "活动措施",
          value: [],
        });
      }
      this.$refs.detailRef.getFileData(arr);
      let userArr = [];
      if (param.activeUserFileIds) {
        queryFileList(param.activeUserFileIds.split(",")).then((res) => {
          if (res.code === 1000 && res.data) {
            userArr.push({
              // title: "活动人员",
              value: [...res.data],
            });
          }
        });
      } else {
        userArr.push({
          // title: "活动人员",
          value: [],
        });
      }
      this.$refs.detailRef.getUserFileData(userArr);
    },
    // 编辑数据
    handleUpdate() {
      this.editType = "edit";
      this.$refs.editFormRef.resetForm();
      this.$refs.editFormRef.getData(this.currentParam);
      if (this.currentParam.activeFileIds) {
        queryFileList(this.currentParam.activeFileIds.split(",")).then(
          (res) => {
            if (res.code === 1000 && res.data) {
              this.$refs.editFormRef.getFileData(res.data);
            }
          }
        );
      }
      if (this.currentParam.activeUserFileIds) {
        queryFileList(this.currentParam.activeUserFileIds.split(",")).then(
          (res) => {
            if (res.code === 1000 && res.data) {
              this.$refs.editFormRef.getFileDataPeople(res.data);
            }
          }
        );
      }
    },
    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1)
      }-${date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate()}`;
    },
    // 活动时间选择
    onActivityDateConfirm(date) {
      this.formData.activeTimeBegin = this.formatDate(date[0]);
      this.formData.activeTimeEnd = this.formatDate(date[1]);
      this.activityDateInterval = `${this.formatDate(
        date[0]
      )} / ${this.formatDate(date[1])}`;
      this.activityDateShow = false;
      this.onRefresh();
    },
    // 删除
    handleDelete(val) {
      this.$Dialog
        .confirm({
          title: "是否确定删除该数据？",
        })
        .then(async () => {
          var res = await deleteActivity([val.activeId]);
          if (res.code === 1000) {
            this.$Notify({ type: "success", message: "删除成功！" });
            this.onRefresh();
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .top {
      padding: 0 10px;
      box-sizing: border-box;
      float: left;
    }
    .bottom {
      margin-top: 3px;
      padding: 3px 10px 0;
      border-top: 1px solid #eee;
      clear: both;
    }
    .other {
      margin: 1px;
      text-align: right;
      font-size: 13px;
      float: right;
    }
  }
  .flex {
    clear: both;
  }
}
</style>
